<template>
  <div class="p-invite-page__container">
    <a-row class="p-invite-page__main" justify="center" :gutter="[0, 30]">
      <a-col :span="24" class="p-invite-page__logo-container">
        <img src="@/assets/logo.png" alt="logo" class="p-invite-page__logo" />
        <img
          src="@/assets/logo-name.png"
          alt="可乐白板"
          class="p-invite-page__banner"
        />
      </a-col>
      <a-col :span="24" class="title">
        {{
          `${data.personName} 邀请你加入${inviteType === 1 ? '团队' : '白板'} ${
            data.projectName
          }`
        }}
      </a-col>
      <a-col :span="6">
        <a-button type="primary" size="large" block @click="joinIn">
          {{ inviteType === 1 ? '加入团队' : '参与协作' }}
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, reactive, ref } from 'vue';
import { useTeamStore, useBoardStore } from '@/store';

const teamStore = useTeamStore();
const boardStore = useBoardStore();
const { getTeamInviteDetails, joinTeamByInviteCode, setCurrentTeamId } =
  teamStore;
const route = useRoute();
const router = useRouter();
const data = reactive({
  personName: '',
  projectName: '',
});
const spinning = ref(true);
const inviteType = ref(route.name === 'teamInvite' ? 1 : 2); // 邀请类型：1 = 团队邀请，2 = 白板邀请

onMounted(async () => {
  await getInviteDetails();
  spinning.value = false;
});

async function getInviteDetails() {
  // 团队邀请
  if (inviteType.value === 1) {
    const res = await getTeamInviteDetails(<string>route.params.code);
    data.personName = res?.data.inviterNickname;
    data.projectName = res?.data.toJoinName;
  } else {
    const res = await boardStore.getBoardInviteDetails(
      <string>route.params.code,
    );
    data.personName = res?.data.inviterNickname;
    data.projectName = res?.data.toJoinName;
  }
}

async function joinIn() {
  if (inviteType.value === 1) {
    const res = await joinTeamByInviteCode(<string>route.params.code);
    if (res?.code === 0) {
      setCurrentTeamId(res.data);
      await router.push({ name: 'workbench' });
    }
  } else {
    const res = await boardStore.joinInBoardByInviteCode(
      <string>route.params.code,
    );
    if (res?.code === 0) {
      boardStore.setCurrentBoardId(res.data);
      await router.push({ path: `/board/${res.data}` });
    }
  }
}
</script>

<style scoped lang="scss">
.p-invite-page__container {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  background: radial-gradient(
      66.06% 66.06% at 0 0,
      rgba(255, 122, 146, 0.16) 0,
      rgba(255, 122, 146, 0) 100%
    ),
    radial-gradient(
      46.32% 67.56% at 52.35% -1%,
      rgba(52, 86, 255, 0.1) 0,
      rgba(52, 86, 255, 0) 100%
    ),
    radial-gradient(
      59.31% 62.11% at 92.4% 0,
      rgba(122, 247, 255, 0.1) 0,
      rgba(122, 247, 255, 0) 100%
    );
  .p-invite-page__main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: 420px;
    .title {
      font-size: 1.5rem;
      font-weight: 500;
    }
  }
  .p-invite-page__logo-container {
    .p-invite-page__logo {
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      width: 4rem;
      height: 4rem;
    }
    .p-invite-page__banner {
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      width: 12rem;
      height: 5rem;
    }
  }
}
</style>
